<template>
  <section class="border-top pt-115 pb-80" id='honor'>
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-lg-8 col-md-12">
          <!-- section title -->
          <div class="section-title text-center">
            <h2>Max.的荣誉之路</h2>
            <p>这里纪录了Max.至建立以来所获的荣誉名称、获奖学生和指导老师，
              奖项内容涉及技能类、专业竞赛类、创新创业类等，震撼宏伟的荣誉默
              默地诉说着Max.值得骄傲的历史，彰显了Max.的成就和辉煌，展望着
              Max.更加灿烂的明天。</p>
          </div>
          <!-- End of section title -->
        </div>
      </div>
      <viewer :images="dataList">
      <div class="row">
          <div class="col-lg-4 col-md-4" v-for="(item,index) in dataList" :key="index">
            <div class="single-blog-inner">
              <div class="post-image">
                <a>
                  <img :src="item.img" :alt="item.ownnerName">
                </a>
              </div>
              <div class="post-content">
                <div class="post-details">
                  <div class="post-info d-flex">
                    <span class="name">获奖人：{{ item.ownnerName }}</span>
                  </div>

                  <div class="post-title">
                    <h3>
                      <nuxt-link to="/current">{{ item.honorName }}</nuxt-link>
                    </h3>
                  </div>
                  <nuxt-link class='blog-btn' to="/current">了解更多</nuxt-link>
                </div>
              </div>
            </div>
          </div>
      </div>
      </viewer>
    </div>
  </section>
</template>

<script>
import {Api} from "~/request/Api";
import Viewer from "v-viewer";
Viewer.setDefaults({
  Options: {
    'inline': true,
    'button': true,
    'navbar': true,
    'title': false,
    'toolbar': true,
    'tooltip': true,
    'movable': true,
    'zoomable': true,
    'rotatable': true,
    'scalable': true,
    'transition': true,
    'fullscreen': true,
    'keyboard': true,
    'url': 'data-source'
  }
})
export default {
  data() {
    return {
      // 总的数据
      dataList: [],
      // 每页显示数量
      pageSize: 3,
      // 总页数
      pageTotal: 1,
      // 当前页，默认第一页
      currentPage: 1,
      // 页码列表
      pageBarList: [],
    }
  },
  created: function () {
    this.memberList();
  },
  methods: {
    async memberList() {
      let data = {
        currentPage: this.currentPage,
        pageSize: this.pageSize
      }
      const result = await Api.getHonorList(data)
      if (result.code === 200) {
        let res = result.data.honorInfo;
        this.pageTotal = res.pages
        //获取对应页数的内容
        this.dataList = res.records
        //调用页码数
        this.pageBarList = this.calcPageNum()
      }
    },
    calcPageNum() {
      let pageTotal = this.pageTotal;
      //获取最大页码数
      let cur = this.currentPage;
      //获取当前页码数
      if (pageTotal < 7) {
        //判断什么时候正常显示
        return pageTotal;
      } else {
        //出翔省略号
        if (cur < 4) {
          //判断当前的页码数是否小于4如果小于4 前四个正常显示，从第五个出现...
          return [1, 2, 3, 4, "后", pageTotal];
        } else if (cur > pageTotal - 4) {
          //判断是否在1后面出现...
          return [
            1,
            "前",
            pageTotal - 4,
            pageTotal - 3,
            pageTotal - 2,
            pageTotal - 1,
            pageTotal,
          ];
        } else {
          //两种情况都不存在就说明当前点击的中间的
          return [1, "前", cur - 1, cur, cur + 1, "后", pageTotal];
        }
      }
    }
  }
}
</script>

<style scoped>
.single-blog-inner .post-image img {
  width: 770px !important;
  height: 415px;
  object-fit: contain;
}

.name {
  color: #4698ff;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
}
</style>
